<template>
  <div id="body">
    <div class="main">
      <div class="frame">
        <h1 class="frame__pagetitle">11ty</h1>
        <!-- <dl class="frame__header frame__header--grid">
        </dl> -->
        <span class="frame__menu">Menu</span>
        <!-- <div class="frame__demos">
          <a href="index.html" class="frame__demo frame__demo--current">demo 1</a>
          <a href="index2.html" class="frame__demo">demo 2</a>
          <a href="index3.html" class="frame__demo">demo 3</a>
          <a href="index4.html" class="frame__demo">demo 4</a>
        </div> -->
      </div>
      <div class="screens" aria-hidden="true">
        <div
          class="screen__item"
          style="--bg-img: url(src/pages/home/img/a.jpg)"
        >
          <div class="screen screen--full"></div>
          <div class="screen screen--clip screen--clip-1"></div>
        </div>
        <div
          class="screen__item"
          style="--bg-img: url(src/pages/home/img/b.jpg)"
        >
          <div class="screen screen--full"></div>
          <div class="screen screen--clip screen--clip-1"></div>
        </div>
        <div
          class="screen__item"
          style="--bg-img: url(src/pages/home/img/c.jpg)"
        >
          <div class="screen screen--full"></div>
          <div class="screen screen--clip screen--clip-1"></div>
        </div>
        <div
          class="screen__item"
          style="--bg-img: url(src/pages/home/img/d.png)"
        >
          <div class="screen screen--full"></div>
          <div class="screen screen--clip screen--clip-1"></div>
        </div>
      </div>
      <div class="content">
        <nav class="menu">
          <span class="menu__item" @click="goToForum">
            <span class="menu__item-tag">March, 26</span>
            <a class="menu__item-link">论坛</a>
          </span>

          <span class="menu__item" @click="goToNotify">
            <span class="menu__item-tag">April, 12</span>
            <a class="menu__item-link">消息</a> </span
          ><br />

          <span class="menu__item" @click="goToShop">
            <span class="menu__item-tag">June, 10</span>
            <a class="menu__item-link">商城</a>
          </span>

          <span class="menu__item" @click="goToUser">
            <span class="menu__item-tag">September, 17</span>
            <a class="menu__item-link">我的</a>
          </span>
        </nav>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import './js/index.js'
import { useRouter } from 'vue-router'
let $router = useRouter()

const goToForum = () => {
  $router.push({path:"/forum"});
};

const goToNotify = () => {
  $router.push({path:"/notify"});
};

const goToShop = () => {
  $router.push({path:"/shop"});
};

const goToUser = () => {
  $router.push({path:"/user"});
};
</script>
<style scoped>
@import "./css/base.css";
</style>
